<!-- 试用期考核模板配置 -->
<template>
  <a-modal
    :visible="visible"
    class="form-modal"
    fullscreen
    :footer="false"
    :closable="false"
    title-align="center"
    @ok="handleOk"
    @cancel="handleCancel"
    :body-style="{
      padding: 0,
      height: '100%',
      display: 'flex',
      flexDirection: 'column'
    }"
  >
    <div class="header">
      <div class="title">
        {{ (toolStore.getCurrId > 0 ? '编辑' : '新增') + '试用期考核模板' }}
      </div>
      <div>
        <a-space>
          <!-- <a-button v-if="menuSelected === '1'" @click="goTo(1)" type="outline"
          >下一步</a-button
        >
        <a-button v-else @click="goTo()" type="outline">上一步</a-button> -->
          <a-button @click="save('2')" type="primary">保存</a-button>
          <a-button @click="handleCancel" type="primary">取消</a-button>
        </a-space>
      </div>
    </div>
    <div class="content">
      <div class="main">
        <div class="hear">
          <a-steps changeable :current="current" @change="setCurrent">
            <a-step description="">基础信息 </a-step>
            <a-step description="">选择考核工具 </a-step>
            <a-step description="">编辑考核指标 </a-step>
            <a-step description="">方案模板预览 ss</a-step>
          </a-steps>
        </div>
        <div class="business" v-show="current === 1">
          <a-form
            style="width: 100%"
            ref="refForm1"
            :model="form.baseData"
            auto-label-width
            layout="vertical"
            :rules="rules"
          >
            <a-form-item
              field="name"
              label="试用期考核模板名称"
              show-colon
              required
            >
              <a-input v-model="form.baseData.name" />
            </a-form-item>
            <a-form-item field="" label="考核周期" show-colon>
              <a-radio-group v-model="cycleSelect">
                <a-radio :value="1">试用期</a-radio>
                <a-radio :value="2">自定义</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              field="cycle"
              label="选择周期"
              show-colon
              v-if="cycleSelect === 2"
            >
              <a-range-picker
                @change="onChange"
                @select="onSelect"
                v-model="form.baseData.cycle"
              />
            </a-form-item>
            <a-form-item field="applicabilityId" label="适用范围" show-colon>
              <a-space>
                <a-button @click="organizaionModalVisible = true"
                  >+部门</a-button
                >
                <a-button @click="positionModalVisible = true">+职位</a-button>
              </a-space>
            </a-form-item>
            <div>
              <span
                >已选
                {{ selectedOrganizationIds.length > 0 ? '部门' : '职位' }}：
              </span>
              <a-space wrap>
                <span v-for="(item, index) in selectedData" :key="index">
                  {{ item.name }}
                </span>
              </a-space>
            </div>
            <a-form-item field="enable" label="启用状态" show-colon>
              <a-switch
                v-model="form.baseData.enable"
                :checked-value="1"
                :unchecked-value="2"
                placeholder="请输入"
              />
            </a-form-item>
            <a-form-item label="描述：">
              <a-textarea
                v-model="form.baseData.remark"
                placeholder="请输入"
                style="height: 200px"
                allow-clear
              />
            </a-form-item>
          </a-form>
        </div>

        <div v-show="current === 2">
          <a-layout class="layout">
            <a-layout-header class="layout-header">
              <div>
                <span></span>
                <div class="layout-title">考核评分规则</div>
              </div>
              <a-button @click="rulesSettingVisible = true" type="text">
                <template #icon>
                  <icon-edit />
                </template>
                <template #default>设置</template></a-button
              >
            </a-layout-header>
            <a-layout-content class="contain">
              <a-table :data="form.rulesData" stripe :pagination="false">
                <template #columns>
                  <a-table-column title="评分上限" data-index="score">
                    <template #cell="{ record }">
                      {{ record.score === 1 ? '设置上限' : '不设置上限' }}
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="上限分值"
                    data-index="upper"
                  ></a-table-column>
                  <a-table-column title="计算规则" data-index="calculate">
                    <template #cell="{ record }">
                      {{ record.calculate === 1 ? '加和计算' : '加权计算' }}
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-layout-content>
          </a-layout>
          <a-layout class="layout">
            <a-layout-header class="layout-header">
              <div>
                <span></span>
                <div class="layout-title">考核维度</div>
              </div>
              <a-button @click="latitudeAdd(null)" type="text">
                <template #icon>
                  <icon-plus />
                </template>
                <template #default>新增考核纬度</template></a-button
              >
            </a-layout-header>
            <a-layout-content class="contain">
              <a-table :data="form.latitudeData" stripe :pagination="false">
                <template #columns>
                  <a-table-column title="序号" :width="80">
                    <template #cell="{ rowIndex }">
                      <span>{{ rowIndex + 1 }}</span>
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="考核纬度名称"
                    data-index="name"
                    :width="200"
                  >
                  </a-table-column>
                  <a-table-column
                    title="考核工具"
                    data-index="tool"
                    :width="200"
                  >
                    <template #cell="{ record }">
                      {{
                        record.tool === 1
                          ? '关键业绩考核(KPI)'
                          : record.tool === 2
                          ? '能力素质考核(BPI)'
                          : record.tool === 3
                          ? '工作计划考核(PPI)'
                          : record.tool === 4
                          ? '目标与关键成果法(OKR)'
                          : record.tool === 5
                          ? '加减分项'
                          : '否决指标法(0-1)'
                      }}
                    </template>
                  </a-table-column>
                  <a-table-column
                    title="配分/权重%"
                    data-index="weight"
                    :width="150"
                  >
                    <template #cell="{ record }">
                      {{ record.weight > 0 ? record.weight : '无' }}
                      <!-- {{ record.weight }} -->
                    </template>
                  </a-table-column>
                  <a-table-column title="备注" data-index="remark" :width="200">
                  </a-table-column>
                  <a-table-column title="操作" :width="200" fixed="right">
                    <template #cell="{ record, rowIndex }">
                      <a-space>
                        <a-button
                          type="text"
                          @click="latitudeAdd(record, rowIndex)"
                          >编辑</a-button
                        >
                        <a-popconfirm
                          content="确认删除该项吗？(如果是编辑情况下删除则会直接删除该项，新增的时候点击保存的时候才会删除！)"
                          @ok="delLatitude(record, rowIndex)"
                        >
                          <a-button type="text" style="color: red"
                            >删除</a-button
                          >
                        </a-popconfirm>
                      </a-space>
                    </template>
                  </a-table-column>
                </template>
              </a-table>
            </a-layout-content>
          </a-layout>
        </div>

        <div v-show="current === 3">
          <div style="margin-bottom: 50px" v-show="selectedTools.includes(1)">
            <KPI
              ref="refKPI"
              :weight="form.latitudeData?.find((item: any) => item.tool === 1)?.weight"
            />
          </div>
          <div style="margin-bottom: 50px" v-show="selectedTools.includes(2)">
            <BPI
              ref="refBPI"
              :weight="form.latitudeData?.find((item: any) => item.tool === 2)?.weight"
            />
          </div>
          <div style="margin-bottom: 50px" v-show="selectedTools.includes(3)">
            <PPI
              ref="refPPI"
              :weight="form.latitudeData?.find((item: any) => item.tool === 3)?.weight"
            />
          </div>
          <div style="margin-bottom: 50px" v-show="selectedTools.includes(4)">
            <OKR
              ref="refOKR"
              :weight="form.latitudeData?.find((item: any) => item.tool === 4)?.weight"
            />
          </div>
          <div style="margin-bottom: 50px" v-show="selectedTools.includes(5)">
            <PlusOrMinus ref="refPlus" />
          </div>
          <div style="margin-bottom: 50px" v-show="selectedTools.includes(6)">
            <RejectionIndex ref="refReject" />
          </div>

          <!-- <a-scrollbar style="height: calc(100vh - 250px); overflow: auto">
            <div style="height: 100%">
              <a-space direction="vertical" :size="60">
                <KPI />
                <BPI />
              </a-space>
            </div>
          </a-scrollbar> -->
        </div>
      </div>
    </div>
    <div class="btn">
      <a-button v-show="current > 1" @click="current = --current"
        >上一步</a-button
      >
      <a-button
        type="primary"
        v-show="toolStore.getCurrId > 0 && current === 1"
        @click="nextAndSave"
        >保存并下一步</a-button
      >
      <a-button
        type="primary"
        v-show="
          (toolStore.getCurrId === 0 && current < 4) ||
          (toolStore.getCurrId > 0 && current > 1 && current < 4)
        "
        @click="next"
        >下一步</a-button
      >
      <a-button type="primary" v-show="current === 4" @click="handleCancel"
        >取消</a-button
      >
      <a-button v-show="current === 4" @click="submit" type="primary"
        >保存</a-button
      >
      <a-button v-show="current === 3 || current === 4" @click="current = 1"
        >跳到基本信息</a-button
      >
    </div>
    <OrganizationModal
      v-model:visible="organizaionModalVisible"
      @organizationEmit="organizationEmit"
      :selectedIds="selectedOrganizationIds"
    ></OrganizationModal>
    <PositionModal
      v-model:visible="positionModalVisible"
      @positionEmit="positionEmit"
      :selectedIds="selectedPositionIds"
    ></PositionModal>
    <RulesSetting
      v-model:visible="rulesSettingVisible"
      @rulesEmit="rulesEmit"
    ></RulesSetting>
    <LatitudeSetting
      v-model:visible="latitudeSettingVisible"
      @latitudeEmit="latitudeEmit"
      :currLatitudeData="currLatitudeData"
      :selectedTools="selectedTools"
      :maxWeight="latitudeWeight"
    ></LatitudeSetting>
  </a-modal>
</template>
<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
import { flatTree, dataTreeFilter } from '@/utils/utils';
import { Message } from '@arco-design/web-vue';
import {
  PostProbationTemplate,
  GetProbationTemplateDetail,
  DelProbationTemplateDimension,
  PutProbationTemplateBaseInfo
} from '@/apis/management/performance/baseSetting/template';
import { GetOrganizationList } from '@/apis/management/organization/organizationManagement';
import { GetPosition } from '@/apis/management/organization/positionManagement';
import RulesSetting from './components/RulesSetting/index.vue';
import LatitudeSetting from './components/LatitudeSetting/index.vue';
import { useAssessmentToolStore } from '@/store';

const props = withDefaults(
  // 参数说明
  defineProps<{
    data?: any; // 请求table数据的函数
    add?: any; // 新增传入函数
    edit?: any; // 编辑传入函数
    validateFun?: any; // 校验函数
    fn?: any; // 刷新表格 可以自定表格ref
    businessType?: string | string[]; // 总集控件编码
    title?: string;
    optionData?: any;
    visible: boolean; // 是否显示
  }>(),
  {}
);
const emits = defineEmits(['update:visible', 'headerSave']);

const toolStore = useAssessmentToolStore();

let refForm1 = ref();
const setUpForm = ref(); // 控件ref

let current = ref(1); // 记录到第几步

const form: any = reactive({
  // 基础设置数据
  baseData: {
    name: '', // 名称
    cycle: undefined, // 考核周期 空为使用试用期，非空使用自定义
    applicability: undefined, // 1:部门 2职位 3人员
    applicabilityId: undefined, // 适用id
    enable: 1, // 启用状态
    remark: '' // 描述
  },
  // 试用期考核评分规则数据
  /*
   {
  score: 1, // 评价总分上限， 1 设置上限 2不设置上限
  upper: undefined, // 上限分值
  calculate: 1 // 评分计算 1加和计算 2加权计算
    }
  */
  rulesData: [],
  /*
    考核纬度数据
      name: '', // 纬度名称
      1 关键业绩考核
      2 能力素质考核
      3 工作计划考核
      4 目标与关键成果法
      5 加减分项
      6 否决指标法
      tool: 1, // 考核工具
      weight: undefined, // 维度权重
      remark: '' // 备注
  */
  latitudeData: []
});
let cycleSelect = ref(1); // 储存选择的考核周期 1试用期 2自定义
let currCalculate = ref(2); // 储存当前的评分规则 1加和计算 2加权

// 储存各个纬度的ref
let refKPI = ref(),
  refBPI = ref(),
  refPPI = ref(),
  refOKR = ref(),
  refPlus = ref(),
  refReject = ref();

const validateName = async (val: string, cb: any) => {
  try {
    // if (validateData.data.edit && validateData.data.name === val) {
    //   return;
    // } else {
    //   console.log('====================================');
    //   console.log(123);
    //   console.log('====================================');
    //   const res = await props?.validateFun(val);
    //   if (res.code) cb(`${res.data}`);
    // }
  } catch (error: unknown) {
    console.log(error);
  }
};

const validateRange = async (val: string, cb: any) => {
  try {
    console.log(selectedData.value.length);

    if (selectedData.value.length === 0) Message.error('请至少选择一项！');
    else return true;
    // if (validateData.data.edit && validateData.data.name === val) {
    //   return;
    // } else {
    //   console.log('====================================');
    //   console.log(123);
    //   console.log('====================================');
    //   const res = await props?.validateFun(val);
    //   if (res.code) cb(`${res.data}`);
    // }
  } catch (error: unknown) {
    console.log(error);
  }
};

const rules = {
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ],
  cycle: [
    {
      required: true,
      message: '请选择'
    }
  ],
  applicabilityId: [
    {
      required: true,
      message: '请选择'
    },
    {
      validator: validateRange
    }
  ],
  enable: [
    {
      required: true,
      message: '请选择'
    }
  ]
};

const menuKey = ref(['1']);
const menuSelected = ref('1');

const getData = async () => {
  try {
    const res = await Promise.all([
      GetProbationTemplateDetail({
        id: toolStore.getCurrId,
        node: 1
      })
    ]);

    /*
      基础设置详情
    */
    form.baseData = {
      id: res[0].id,
      name: res[0].name,
      cycle: res[0].cycle ? JSON.parse(res[0].cycle) : null,
      applicability: res[0].applicability,
      applicabilityId: res[0].applicabilityId,
      enable: res[0].enable,
      remark: res[0].remark
    };

    /*
     判断是试用期还是自定义考核时间
    */
    if (form.baseData.cycle) cycleSelect.value = 2;
    else cycleSelect.value = 1;
    selectedData.value = [];
    selectedOrganizationIds.value = [];
    selectedPositionIds.value = [];
    // 判断是部门、职位还是人员
    // 部门
    if (form.baseData.applicability === 1) {
      selectedOrganizationIds.value = [form.baseData.applicabilityId];
      const temp = flatTree(dataTreeFilter(await GetOrganizationList({})));
      selectedData.value.push({
        name: temp.find(
          (item: any) => item.id === form.baseData.applicabilityId
        )?.name
      });
    }
    // 职位
    else if (form.baseData.applicability === 2) {
      selectedPositionIds.value = [form.baseData.applicabilityId];
      const { content } = await GetPosition({
        page: 1,
        size: -1
      });
      selectedData.value.push({
        name: content.find(
          (item: any) => item.id === form.baseData.applicabilityId
        )?.name
      });
    }

    /*
      考核评分规则详情
    */
    form.rulesData = [
      {
        score: res[0].rules.score,
        upper: res[0].rules.score === 1 ? res[0].rules?.upper : undefined,
        calculate: res[0].rules.calculate
      }
    ];
    toolStore.setRules(
      res[0].rules.score,
      res[0].rules.calculate,
      res[0].rules.score === 1 ? res[0].rules?.upper : undefined
    );

    /*
      考核指标
    */
    form.latitudeData = [];
    selectedTools.value = [];
    res[0].dimensions.forEach(async (item: any) => {
      form.latitudeData.push({
        ...item
      });
      selectedTools.value.push(item.tool);
      const temp = await GetProbationTemplateDetail({
        id: item.id,
        node: 2,
        tool: item.tool,
        type: item.tool === 5 ? 1 : item.tool === 6 ? 2 : undefined
      });

      let temp2 = []; // 储存kpi加减分
      if (item.tool === 1) {
        temp2 = await GetProbationTemplateDetail({
          id: item.id,
          node: 2,
          tool: 7,
          type: 3
        });
      }
      switch (item.tool) {
        // kpi
        // case 1:
        //   temp[0].dimensionaId
        //     ? (refKPI.value.KpiData.extraData = temp)
        //     : (refKPI.value.KpiData.data = temp);
        //   break;
        // bpi
        // case 2:
        //   refBPI.value.bpiData.data = temp;
        //   temp.forEach((item: any) => {});
        //   break;
        // // ppi
        case 3:
          refPPI.value.PpiData.data = temp;
          break;
        // okr
        case 4:
          refOKR.value.OkrData.data = temp;
          break;
        // 加减分
        case 5:
          refPlus.value.PlusData.extraData = temp;
          break;
        // 01否决
        case 6:
          refReject.value.rejectData.extraData = temp;
          break;
        default:
          break;
      }
      if (item.tool === 1) {
        refKPI.value.KpiData.data = temp;
        refKPI.value.KpiData.extraData = temp2;
        if (temp2.length > 0) refKPI.value.setExtra = true;
      }
      // bpi
      else if (item.tool === 2) {
        refBPI.value.bpiData.data = temp;
        const temp2 = refBPI.value.columns.find(
          (item: any) => item.title === '评分标准'
        );
        temp2.children = [];
        refBPI.value.currRulesData = [];
        temp[0].evaluations.forEach((item2: any, index2: number) => {
          temp2.children.push({
            title: item2.name,
            width: 150,
            headerCellStyle: {
              height: '30px'
            },
            render: ({ record }: any) => record.evaluations[index2].value
          });
          refBPI.value.currRulesData.push({
            name: item2.name,
            value: undefined
          });
        });
      }
    });
    console.log('====================================asdasd');
    console.log(res);
    console.log(refKPI?.value);
    console.log(refBPI?.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};

// onMounted(() => {
//   if (toolStore.getCurrId > 0) {
//     getData();
//   }
// });

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      //  编辑的时候
      if (toolStore.getCurrId > 0) {
        getData();
      }
    }
  }
);

let organizaionModalVisible = ref(false); // 选择组织弹出框
let positionModalVisible = ref(false); // 选择部门弹出框

// const show = (flag: number) => {
//   if (flag === 1) organizaionModalVisible.value = true;
// };

let selectedData: any = ref([]); // 选中范围的值
let selectedOrganizationIds = ref<number[]>([]),
  selectedPositionIds = ref<number[]>([]);
const organizationEmit = (ids: number[], data: any) => {
  selectedOrganizationIds.value = ids;
  selectedData.value = [];
  form.baseData.applicability = 1;
  form.baseData.applicabilityId = ids[0];
  // 清空职位的ids
  selectedPositionIds.value = [];
  data.forEach((item: any) => {
    selectedData.value.push({
      name: item.name
    });
  });
};
const positionEmit = (ids: number[], data: any) => {
  selectedPositionIds.value = ids;
  selectedData.value = [];
  form.baseData.applicability = 2;
  form.baseData.applicabilityId = ids[0];
  // 清空职组织的ids
  selectedOrganizationIds.value = [];
  data.forEach((item: any) => {
    selectedData.value.push({
      name: item.name
    });
  });
};

// 点击步骤
const setCurrent = (index: number) => {
  current.value = index;
};

let rulesSettingVisible = ref(false); // 是否显示评分规则

// 评分规则自定义事件
const rulesEmit = (val: any) => {
  // 如果用户编辑了评分规则，则下面的考核纬度全部清空重新填
  if (form.rulesData.length > 0) {
    form.latitudeData = [];
    latitudeWeight.value = 0;
    selectedTools.value = [];
  }
  toolStore.setRules(val.score, val.calculate, val.upper);
  // currCalculate.value = val.calculate;
  form.rulesData[0] = val;
  console.log(form.rulesData[0]);
};

let latitudeSettingVisible = ref(false);
let currLatitudeData = ref(null);
let selectedTools = ref<number[]>([]); // 已经选择的工具
let currIndex = ref(-1); //  储存当前选中考核工具的行
// 新增或编辑考核纬度弹出框
const latitudeAdd = (record: any, index?: number) => {
  currLatitudeData.value = null;
  if (index !== undefined) currIndex.value = index;
  else currIndex.value = -1;
  if (record) currLatitudeData.value = record;
  latitudeSettingVisible.value = true;
  // 编辑
  // if (record) currLatitudeData.value = record;
  // else {
  //   currLatitudeData.value = {
  //     name: '', // 纬度名称
  //     /*
  //     1 关键业绩考核
  //     2 能力素质考核
  //     3 工作计划考核
  //     4 目标与关键成果法
  //     5 加减分项
  //     6 否决指标法
  //   */
  //     tool: undefined, // 考核工具
  //     weight: 0, // 维度权重
  //     remark: '', // 备注
  //     addition: 2 // 允许员工新增指标 1是 2否
  //   };
  // }

  // latitudeSettingVisible.value = true;
};

// 删除一项考核纬度
const delLatitude = async (record: any, index: number) => {
  // 编辑状态下
  if (record.id) {
    await DelProbationTemplateDimension({
      id: record.id,
      tool: record.tool
    });
  }
  form.latitudeData.splice(index, 1);
  selectedTools.value = selectedTools.value.filter(
    (item: any) => item !== record.tool
  );
  latitudeWeight.value = 0;
  form.latitudeData.forEach((item: any) => {
    latitudeWeight.value += item.weight;
  });
};

let latitudeWeight = ref(0); // 当前已经选择的权重的总和
// 考核纬度自定义事件
const latitudeEmit = (record: any, flag?: boolean) => {
  if (flag) form.latitudeData.push(record);
  else {
    if (currIndex.value !== -1) form.latitudeData[currIndex.value] = record;
    else form.latitudeData.push(record);
    currIndex.value = -1;
  }
  selectedTools.value = [];
  form.latitudeData.forEach((item: any) => {
    selectedTools.value.push(item.tool);
  });
  latitudeWeight.value = 0;
  form.latitudeData.forEach((item: any) => {
    latitudeWeight.value += item.weight;
  });
};

// 保存
const save = async (e: string) => {
  console.log(form);
  console.log(refKPI.value.KpiData);

  // if (await refForm?.value?.validate()) {
  //   visible.value = true;
  //   return;
  // } else {
  //   //
  // }
};
// 点击标签
const changeMenu = async (e: string) => {
  if (await refForm1?.value?.validate()) {
    menuKey.value = [`1`];
    return;
  } else {
    menuKey.value = [`${e}`];
    menuSelected.value = e;
  }
  menuSelected.value = e;
};
const validateData = reactive({ data: { name: '', edit: false } });

// 显示全屏弹框
const fullScreen = () => {
  if (props.id > 0) {
    console.log(23232);
  }
  console.log('====================================');
  console.log(props.id);
  console.log('====================================');
};
// 关闭弹窗
const handleCancel = () => {
  emits('update:visible', false);
  // fromData.data = {
  //   name: '',
  //   enable: 1,
  //   remark: ''
  // };
  // visible.value = false;
  // props.fn.loadData();
  // menuSelected.value = '1';
  // menuKey.value = ['1'];
  // validateData.data.edit = false;
  // validateData.data.name = '';
};

let formRef = ref();

// 点击下一步
const next = async () => {
  // console.log(form);
  // if (current.value === 1) {
  //   if (await refForm1.value.validate()) {
  //     return Message.error('请填写必填项');
  //   }
  // }
  // if (current.value === 2) {
  //   if (form.rulesData.length === 0) return Message.error('请配置评分规则！');
  //   if (form.latitudeData.length === 0)
  //     return Message.error(
  //       '请至少配置一个考核工具（不包括加减分和0/1否决法）！'
  //     );
  //   if (latitudeWeight.value !== 100)
  //     return Message.error('考核工具权重总和必须为100！');
  // }
  current.value++;
};

// 保存并下一步，编辑的时候显示，用来保存基础信息
const nextAndSave = async () => {
  try {
    await PutProbationTemplateBaseInfo({
      ...form.baseData,
      cycle: JSON.stringify(form.baseData.cycle)
    });
    current.value++;
  } catch (error: unknown) {
    console.log(error);
  }
};

// 保存提交
const submit = async () => {
  try {
    const data = {
      ...form.baseData,
      type: 1,
      rules: {
        ...form.rulesData[0]
      },
      dimensions: []
    };
    data.cycle = JSON.stringify(data.cycle);
    console.log(form.latitudeData);

    form.latitudeData.forEach((item: any, index: number) => {
      const dimensions = data.dimensions;
      dimensions.push({
        ...item
      });
      switch (item.tool) {
        case 1:
          dimensions[index].kpis = [];
          dimensions[index].kpiCompute = [];
          refKPI.value.KpiData.data.forEach((item2: any) => {
            // 定性指标
            if (item2.type === 1) {
              dimensions[index].kpis.push({
                ...item2
              });
            }
            // 定量指标
            else {
              dimensions[index].kpis.push({
                ...item2,
                reference: item2?.target[0]?.reference,
                goal: item2?.target[0]?.goal,
                challenge: item2?.target[0]?.challenge
              });
            }
          });
          refKPI.value.KpiData.extraData.forEach((item3: any) => {
            dimensions[index].kpiCompute.push({
              ...item3,
              type: 3
            });
          });
          break;
        case 2:
          dimensions[index].bpis = [];
          refBPI.value.bpiData.data.forEach((item2: any) => {
            dimensions[index].bpis.push({
              ...item2
            });
          });
          break;
        case 3:
          dimensions[index].ppis = [];
          refPPI.value.PpiData.data.forEach((item2: any) => {
            dimensions[index].ppis.push({
              ...item2
            });
          });
          break;
        case 4:
          dimensions[index].okrs = [];
          refOKR.value.OkrData.data.forEach((item2: any) => {
            dimensions[index].okrs.push({
              ...item2
            });
          });
          break;
        case 5:
          dimensions[index].compute = [];
          refPlus.value.PlusData.extraData.forEach((item2: any) => {
            dimensions[index].compute.push({
              ...item2,
              type: 1
            });
          });
          break;
        case 6:
          dimensions[index].veto = [];
          refReject.value.rejectData.extraData.forEach((item2: any) => {
            dimensions[index].veto.push({
              ...item2,
              type: 2
            });
          });
          break;
        default:
          break;
      }
    });
    console.log('====================================');
    console.log(data);
    console.log('====================================');
    await PostProbationTemplate(data);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 暴露方法给父组件
defineExpose({ fullScreen, save });

const rest = ref('horizontal');
</script>
<style lang="less" scoped>
.header {
  display: flex;
  border-bottom: 1px solid #eee;
  align-items: center;
  justify-content: space-between;
  background: #3d7eff;
  padding: 10px;
  .title {
    color: #fff;
    font-size: 16px;
  }
}

.content {
  flex: 1;
  // padding-bottom: 82px;
  padding: 0 20px 82px 20px;
  // height: calc(100vh - 120px);
  // padding: 20px;
  .main {
    height: 100%;
    padding: 10px 20px;
    // background: #fff;
    .hear {
      width: 70%;
      padding: 20px;
      // height: 50px;
      margin: auto;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
    }
    .business {
      width: 60%;
      margin: auto;
      padding-right: 100px;
    }

    .layout {
      margin: 20px 20px;
      .layout-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        background-color: rgb(var(--primary-10));
        border-radius: 4px;
        margin-bottom: 20px;
        div {
          display: flex;
          align-items: center;
          .layout-title::before {
            content: '*';
            color: red;
          }
          span {
            margin: 0 20px;
            display: inline-block;
            width: 5px;
            height: 30px;
            background-color: #165dff;
          }
        }
      }

      .contain {
        width: 80%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.btn {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  padding-top: 20px;
  border-top: 2px solid #f8f8f8;
  box-shadow: 0px -6px 2px rgb(0 0 0 / 2%);
  background-color: #fff;
  z-index: 9;
}
:deep(.arco-btn) {
  margin-right: 20px;
  width: 120px;
}
:deep(.arco-table-th),
:deep(.arco-table-td) {
  height: 60px;
}
</style>
